<template>
  <div>
    <van-row gutter="20" class="title_left">
      <van-col span="8" style="padding-top: 45px">
        <a @click="back" class="back_a" style="color: white; margin-left: 10px">
          返回
        </a>
      </van-col>
      <van-col
        span="8"
        style="text-align: center; color: white; padding-top: 45px"
        >违规复核</van-col
      >
      <van-col span="8"></van-col>
    </van-row>
    <van-row class="topMargin">
      <van-col span="24">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell
            @click="toDetail(item)"
            is-link
            v-for="item in this.reviewList"
            :key="item.id"
          >
            <template #title>
              <div>
                车牌号:{{ item.vehicleInfo.plateNum }}
                <van-tag
                  v-if="item.vehicleInfo.vehicleType === 1"
                  type="primary"
                  >试</van-tag
                >
                <van-tag
                  v-else-if="item.vehicleInfo.vehicleType === 2"
                  type="primary"
                  >客</van-tag
                >
                <van-tag
                  v-else-if="item.vehicleInfo.vehicleType === 3"
                  type="primary"
                  >救</van-tag
                >
              </div>
              <div>来源:{{ item.violationSource | violationType }}</div>
              <div>时间:{{ formatDate(item.updateTime) }}</div>
            </template>
          </van-cell>
        </van-list>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { Api } from "../../../api/api_config";

export default {
  data() {
    return {
      currentUser: {},
      reviewList: [],
      loading: false,
      finished: false,
      page: 1,
      pagesize: 5,
    };
  },
  filters: {
    violationType: function (value) {
      return value === 1 ? "人为使用" : "硬件检测";
    },
  },
  computed: {
    // 使用计算属性
    formatDate() {
      return function (val) {
        // 对计算属性进行传参
        return val ? this.$moment(val).format("YYYY-MM-DD HH:MM:SS") : "";
      };
    },
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      // 获取company对象
      this.currentUser = this.$store.state.configuration.currentUser;
    },
    queryViolation() {
      // let that = this;
    },
    toDetail(item) {
      this.$store.state.violation = item
      this.$router.push("/carUsage/reviewViolations/reviewDetail");
    },
    back() {
      this.$router.push("/carUsage");
    },
    onLoad() {
      let that = this;
      this.$axios({
        method: Api.Violation.violation.method,
        url:
          Api.Violation.violation.url +
          "?CompanyId=" +
          this.currentUser.depId +
          "&page=" +
          this.page +
          "&pagesize=" +
          this.pagesize,
      })
        .then(function (res) {
          // 加载状态结束
          that.loading = false;
          that.page++;

          for (let i = 0; i < res.data.items.length; i++) {
            const element = res.data.items[i];
            that.reviewList.push(element);
          }
          // 数据全部加载完成
          if (that.reviewList.length >= res.data.totalCount) {
            that.finished = true;
            console.log(that.reviewList);
          }
        })
        .catch(function (e) {
          console.log(e);
        });
    },
  },
};
</script>

<style scoped>
</style>
